<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./vue.js"></script>
    <style>

    </style>
</head>
<body>
    <!-- 一、使用 table 表格的方式渲染出如下学生成绩信息，其中成绩>=90，显示“优秀"；80<=
    成绩<90，显示“良好"，60<=成绩<80，显示及格；成绩<60，显示“不及格"。成绩大于等于
    90 分的学员，背景使用“#7DB3FA"高亮显示。 -->

<div id="app">
    <table class="table table-bordered">
        <thead>
            
                <td>id</td>
                <td>姓名</td>
                <td>性别</td>
                <td>成绩</td>
                <td>等级</td>
            
        </thead>
        <tbody>
            <tr v-for="item in actors" :class="[item.score>=90?'active':'']">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.score}}</td>
                <td v-if="item.score>=90">优秀</td>
                <td v-else-if="item.score>=80">良好</td>
                <td v-else="item.score>=60">及格</td>
                <td v-else>不及格</td>
            </tr>
        </tbody>
      </table>
</div>

</body>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
        let vm = new Vue({
            el: "#app",
            data: {
                actors:
                    [
                        { id: 1, name: '诸葛亮', sex: '男', score: 98 },
                        { id: 2, name: '周瑜', sex: '男', score: 88 },
                        { id: 3, name: '刘阿斗', sex: '男', score: 50 },
                        { id: 4, name: '曹植', sex: '男', score: 90 },
                        { id: 5, name: '张飞', sex: '男', score: 70 },
                        { id: 6, name: '曹丕', sex: '男', score: 55 }
                    ]
            }
        })
</script>
</html>